<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test1</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script>
      var myChart = echarts.init(document.getElementById("main"));

      var data = [];
      var links = [];

      $.get("../data/level1-level2.json").done(function(data) {
        console.log(data);
        data = [
          { name: "一级数据", symbolSize: 100, category: 0 },
          { name: "二级数据1", symbolSize: 60, category: 1 },
          { name: "二级数据2", symbolSize: 60, category: 1 },
          { name: "二级数据3", symbolSize: 60, category: 1 },
          { name: "二级数据4", symbolSize: 60, category: 1 }
        ];
        links = [
          { source: "一级数据", target: "二级数据1" },
          { source: "一级数据", target: "二级数据2" },
          { source: "一级数据", target: "二级数据3" },
          { source: "一级数据", target: "二级数据4" }
        ];

        updateGraph(data, links);
      });

      function updateGraph(data, links) {
        let option = {
          series: [
            {
              type: "graph",
              layout: "force",
              force: {
                repulsion: 2050,
                gravity: 0.1,
                layoutAnimation: false
              },
              data: data,
              links: links,
              categories: [{ name: 0 }, { name: 1 }],
              label: {
                normal: {
                  show: true,
                  position: "inside",
                  formatter: "{b}",
                  fontSize: 16
                }
              },
              lineStyle: {
                normal: {
                  width: 6,
                  color: "source",
                  curveness: 0,
                  type: "solid"
                }
              }
            }
          ]
        };
        console.log(option);
        myChart.setOption(option);
      }
    </script>
  </body>
</html>
